<template>
  <div ref="userRole">
    <!-- <Modal
      v-model="user.userRoleModalSta"
      title="角色设置"
      :loading="loading"
      @on-ok="userRoleOk"
    >
      <Row>
        <XCol :span="20">
          <Form ref="userRoleForm" label-position="right" :label-width="100">
            <FormItem>
              <CheckboxGroup v-model="user.userRoleSta">
                <div v-for="(roleList, index) in role.roleListSta" :key="index">
                  <Checkbox :label="roleList.id">
                    <span>{{ roleList.name }}</span>
                  </Checkbox>
                </div>
              </CheckboxGroup>
            </FormItem>
          </Form>
        </XCol>
      </Row>
    </Modal> -->
  </div>
</template>
<script>
// import {
//   Modal,
//   Row,
//   Col,
//   Form,
//   FormItem,
//   CheckboxGroup,
//   Checkbox
// } from "iview";
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  name: "UserRole",
  data() {
    return {
      loading: true
    };
  },
  created() {
    this.roleListAct(); //初始化角色列表
  },
  mounted() {},
  computed: {
    ...mapState({
      user: state => state.user, //vuex用户
      role: state => state.role //vuex角色
    })
  },
  methods: {
    ...mapMutations(["userRoleModalMut"]),
    ...mapActions(["roleListAct"]),
    //提交
    userRoleOk() {
      let _self = this;
      setTimeout(() => {
        let obj = this.$qs.stringify({
          userId: this.user.userIdSta,
          roles: this.user.userRoleSta
        });
        this.$axios.post("/acl_user/editUserRoles", obj).then(res => {
          let state = res.data;
          if (state) {
            _self.userRoleModalMut({
              state: false
            }); //关闭模态框
          } else {
            _self.$Message.error("数据库更新失败，请重新提交");
          }
        });
        //动画
        this.loading = false;
        this.$nextTick(() => {
          this.loading = true;
        });
      }, 2000);
    }
  },
  components: {
    // Modal,
    // Row,
    // XCol: Col,
    // Form,
    // FormItem,
    // CheckboxGroup,
    // Checkbox
  }
};
</script>
